<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>银行帐户余额变更通知</h3>
        <p>帐号:3001237890122</p>
        <p>余额为:{{count}}</p>
        支取人民币 :<input type="text" v-model="money" /> &nbsp;&nbsp;
        <button type="button" @ click="changeMoney( )">支取||{{ money}}元</button>
        <p>支取后余额为:{{count}}元</p>
        <h3>以下是支出明细帐</h3>
        {{detail}}
        <hr>
    </div>
</body>
<script type="text/javascript">
    const appCom = {
        data() {
            return {
                count: 10000,
                money: 500,
                record: []
            }
        },
        watch: {
            count(newValue, oldValue) {
                alert('帐户余额由:' + oldValue + '变为' + newValue + '元!');
            }
        },
        methods: {
            changeMoney() {
                if (his.money <= 0) {
                    aler('请输入正确取款金额!');
                    return;
                }
                if (this.money > this.count) {
                    aler('余额不足,请重新输入取款金额!');
                    return;
                }
                this.count = this.count - this.money;
                this.record.push(this.money);
            }
        },
        computed: {
            detail() {
                let str = '';
                for (let i = 0; i < this.record.length; i++) {
                    str = str + '第' + (i + 1) + '次取款: ' + this.record[i] + '元; ';
                }
                return str;
            }
        }
    };
    Constapp = Vue.createApp(appCom).mount("#app");
</script>

</html>